<template>
  <div class="router-view">
    <category-header></category-header>
    <div class="category-wrap">
      <div class="nav-slide-wrapper">
        <ul class="nav-slide">
          <li v-for="(item, index) in datalist" :key="index" @click="selectMenu(index)" :class="{'active' : currentIndex === index}">{{item.name}}</li>
        </ul>
      </div>
      <div class="content-wrapper">
        <div v-for="(item, index) in categoryList" :key="index" class="content-slide">
          <img v-if="item.mainImgUrl" class="category-main-img" :src="item.mainImgUrl" alt="">
          <div v-for="(category, index) in item.list" :key="index" class="category-list">
            <p class="catogory-title">{{category.title}}</p>
            <div v-for="(product, index) in category.productList" :key="index" class="product-item">
              <img class="product-img" :src="product.imgUrl" alt="">
              <p class="product-title">{{product.title}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar.vue";
import { getData } from "../../api/api";
import CategoryHeader from '../../components/categoryHeader.vue';
// import BScroll from "better-scroll"
export default {
  data() {
    return {
      currentIndex: 0,
      datalist: [],
    };
  },
  // 计算属性 将数据进行过滤
  computed: {
    categoryList() {
      return this.datalist.filter((v, i) => this.currentIndex == i)
    }
  },
  methods: {
    selectMenu(index) {
      this.currentIndex = index
    }
  },
  components: { tabBar, CategoryHeader },
  created() {
    getData((res) => {
      // console.log(res.data);
      this.datalist = res.data
    });
  },
};
</script>

<style lang="scss" scoped>

.category-wrap {
  display: flex;

  .nav-slide-wrapper {
    width: 30%;
    height: 640px;

    .nav-slide {
      width: 100%;
      background: #f8f8f8;

      li {
        height: 66px;
        line-height: 66px;
        text-align: center;
        font-size: 20px;
      }
    }

    .active {
      background: #fff;
      color: red;
    }
  }

  .content-wrapper {
    width: 70%;

    .content-slide {
      height: 100%;
      padding: 14px;
      // background: skyblue;

      .category-main-img {
        width: 100%;
        height: 169px;
        
      }

      .category-list {
        display: flex;
        flex-wrap: wrap;

        .catogory-title {
          width: 100%;
          font-size: 24px;
          font-weight: 500;
          padding: 28px 0;
        }

        .product-item {
          width: 33.3%;
          margin-bottom: 14px;
          font-size: 21px;
          text-align: center;

          .product-img {
            width: 100%;
            height: 165px;
          }

        }
      }
    }
  }
}
</style>